@import "../../common/activity/act_com";
@import "../../common/activity/pop_user";

body {
  background-color: #546dfa
}

.container {
  display: flex;
  flex-direction: column;
}

.w {
  padding: 0;
}

.container main {
  flex-grow: 1;
  display: flex;
  padding: 0 0.4rem;
  position: relative;
  left: 0;
  top: 0;
}

.container main .w {
  flex-grow: 1;
}

.price_des > div {
  display: flex;
  justify-content: space-between;
}

.price_des > div p {
  font-size: 0.42667rem;
  color: #333;
}

.price_des > div p span {
  color: #f35625;
}

.c_price p {
  line-height: 1.06667rem;
  font-size: 0.48rem !important;
}

.join_activity {
  margin-top: 0.50667rem;
  padding: 0.4rem;
  background-color: #eef1fe;
  border-radius: 0.13333rem;
}

.activity_status {
  display: flex;
  justify-content: space-between;
}

.activity_status .help_cut, .activity_status .want_join {
  width: 3.73333rem;
  height: 1.06667rem;
  background-color: #ffe4b2;
  text-align: center;
  border-radius: 0.13333rem;
  line-height: 1.06667rem;
  font-size: 0.53333rem;
  color: #f35625;
}

.want_join, .first_want_join, .join {
  background-color: #FF9c33 !important;
}

.activity_status .want_join {
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent);
  background-size: 1.06667rem 1.06667rem;
  animation: progress-bar-stripes 1s linear infinite;
}

@keyframes progress-bar-stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 1.06667rem 0;
  }
}

.activity_status .first_want_join, .activity_status .look_for_friend {
  flex-grow: 1;
  height: 1.06667rem;
  background-color: #FF9c33;
  text-align: center;
  border-radius: 0.13333rem;
  line-height: 1.06667rem;
  color: #333;
  font-size: 0.53333rem;
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent);
  background-size: 1.06667rem 1.06667rem;
  animation: progress-bar-stripes 1s linear infinite;
}

.return_mine {
  width: 3.73333rem;
  height: 1.06667rem;
  background-color: #FF9c33;
  text-align: center;
  border-radius: 0.13333rem;
  line-height: 1.06667rem;
  color: #333;
  font-size: 0.53333rem;
}

.container main .w .join_activity .cut_price_msg {
  /* 砍价信息 */
  text-align: center;
  font-size: 0.37333rem;
  color: #666;
  line-height: 1.06667rem;
}

.container main .w .join_activity .cut_price_msg .success_cut {
  color: #f35625;
}

.activity_countdown p {
  text-align: center;
  color: #fff;
  line-height: 1.06667rem;
  height: 1.06667rem;
  font-size: 0.37333rem;
  letter-spacing: 1px;
}

.activity_countdown p .end_word {
  color: #f35625;
  background-color: #ffd250;
  border-radius: rem(2);
  padding: 0 rem(3);
  margin: 0 rem(3);
}

.dynamic_time span {
  color: #f35625;
  background-color: #ffd250;
  border-radius: rem(2);
  padding: 0 rem(3);
  margin: 0 rem(3);
}

.container header {
  position: relative;
  left: 0;
  top: 0;
}

.container header .banner_img {
  width: 100%;
}

.container header .banner_img img {
  width: 100%;
}

.container header .activity_slogan {
  display: flex;
  justify-content: center;
}

.container header .activity_slogan h1 {
  width: 80%;
  text-align: center;
  color: #fff;
  font-size: 0.53333rem;
  line-height: 0.8rem;
}

.activity_des {
  background-color: #eef1fe;
  padding: 0rem 0.26667rem 0.26667rem;
  margin-top: 1.33333rem;
  border-radius: 0.13333rem;
  position: relative;
  left: 0;
  top: 0;
}

.activity_des .activity_des_title {
  position: relative;
  left: 0;
  top: -0.74667rem;
  margin: 0 auto;
  width: 2.93333rem;
  text-align: center;
  height: 0.96rem;
  line-height: 0.96rem;
  background-color: #ffef0f;
  font-size: 0.42667rem;
  color: #333;
  z-index: 2;
}

.activity_des .activity_des_title h2 {
  position: relative;
  z-index: 1;
}

.activity_des .activity_des_title h2:after, .activity_des .activity_des_title h2:before {
  content: "";
  position: absolute;
  display: block;
  border-style: solid;
  border-color: #ffef0f transparent transparent transparent;
  bottom: -0.21333rem;
  z-index: 4;
}

.activity_des .activity_des_title h2:before {
  right: 2.72rem;
  border-width: 0.21333rem 0 0 0.21333rem;
}

.activity_des .activity_des_title h2:after {
  left: 2.72rem;
  border-width: 0.21333rem 0.21333rem 0 0;
}

.activity_des .activity_des_title:before, .activity_des .activity_des_title:after {
  content: "";
  position: absolute;
  display: block;
  top: 0.21333rem;
  border: 0.48rem solid #ffef0f;
}

.activity_des .activity_des_title:before {
  left: -1.06667rem;
  border-right-width: 0.8rem;
  border-left-color: transparent;
}

.activity_des .activity_des_title:after {
  right: -1.06667rem;
  border-left-width: 0.8rem;
  border-right-color: transparent;
}

.activity_des .tpc_content div {
  margin-bottom: 0.26667rem;
}

/* 版块标题使用h2*/
.activity_des_title h2 {
  letter-spacing: 2px;
  font-size: 0.42667rem;
  color: #333;
  font-weight: 700;
  padding: 0 0.13333rem;
}

/* 当标题可编辑时*/
.activity_des_title h2 input {
  height: 0.8rem;
  line-height: 0.48rem;
  font-size: 0.42667rem;
  width: 2.66667rem;
  position: relative;
  top: -1px;
  text-align: center;
  left: -1px;
}

.activity_des_content li {
  margin-bottom: rem(10);
}

.phb {
  /* 排行榜 */
}

.phb ul {
  display: flex;
  justify-content: space-between;
  padding: 0.05333rem 0;
}

.phb ul li {
  width: 2.1rem;
}

.phb ul li:last-child {
  flex-grow: 1;
  text-align: right;
}

.phb ul span {
  color: #f35625;
}

.cut_suc_notify {
  display: none;
  position: fixed;
  left: 0;
  top: 2.66667rem;
  z-index: 4;
  overflow: hidden;
}

.cut_suc_notify .cut_circle {
  position: absolute;
  left: 3.14667rem;
  top: 2.50667rem;
  width: 3.73333rem;
}

.cut_suc_notify .cut_detail_message {
  position: absolute;
  left: 3.14667rem;
  top: 3.2rem;
  width: 3.73333rem;
  height: 2.13333rem;
  padding: 0.8rem 0rem;
  border-radius: 50%;
  background-color: transparent;
  display: flex;
  align-items: center;
  flex-direction: column;
  color: #333;
  font-size: 0.37333rem;
  line-height: 0.53333rem;
}

.cut_suc_notify .cut_detail_message div {
  font-size: 0.53333rem;
  line-height: 1.06667rem;
}

.cut_suc_notify .cut_circle_bg {
  animation: rotate 6s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 初始菜刀 */
.start_knife {
  width: 2.26667rem;
  position: absolute;
  top: 0;
  z-index: 4;
  left: 4.26667rem;
  animation: knifeFall .5s linear 1;
  display: none;
}

@keyframes knifeFall {
  0% {
    top: 0;
  }
  50% {
    top: 2.93333rem;
  }
  100% {
    top: 5.86667rem;
  }
}

/* 初始○ */
.start_circle {
  position: absolute;
  left: 3.14667rem;
  top: 5.86667rem;
  width: 3.73333rem;
  height: 2.13333rem;
  padding: 0.8rem 0rem;
  border-radius: 50%;
  background-color: #ffef0f;
  z-index: 4;
  display: none;
}

/* 重复砍价弹窗*/
.Pop-ups_tem {
  position: absolute;
  top: 5.33333rem;
  display: none;
  flex-direction: column;
  height: 4.53333rem;
  margin: 0 0.66667rem;
  width: 8.66667rem;
  border-radius: 0.13333rem;
  overflow: hidden;
  z-index: 4;
}

.Pop-ups_tem .pop_content {
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.42667rem;
  flex-grow: 1;
}

.Pop-ups_tem .pop_footer {
  height: 1.2rem;
  background-color: #0099ff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Pop-ups_tem .pop_footer p {
  color: #fff;
}

.content_img {
  img {
    width: 100%;
  }
}

.music_ctrl {
  width: 0.8rem;
  height: 0.8rem;
  position: absolute;
  left: 0.26667rem;
  top: 1.06667rem;
  z-index: 2;
  animation: rotate 3s linear infinite;
}

.refueling_suc_notify {
  display: none;
  position: absolute;
  left: 0;
  top: rem(200);
  z-index: 4;
  .refueling_circle {
    /* 初始○ */
    position: absolute;
    left: rem(118);
    top: rem(120);
    width: rem(140);
    height: rem(140);
    line-height: rem(140);
    text-align: center;
    border-radius: 50%;
    background-color: #ffef0f;
    //color:#fff;
    z-index: 4;
  }
  .refueling_circle_bg {
    animation: rotate 6s linear infinite;
  }
  .start_rocket {
    /* 开始火箭位置 */
    position: absolute;
    top: rem(54);
    left: rem(148);
    width: rem(80);
    z-index: 5;
    -webkit-animation: move 0.5s 4 linear, up .5s 2s 1;
    animation-fill-mode: forwards; /* 让动画执行完停留在最后*/
  }
}

@keyframes move {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  33% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  66% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@-webkit-keyframes move /* Safari and Chrome */
{
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  33% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  66% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes up { /* 火箭升天动画 */
  0% {
    top: rem(54)
  }

  100% {
    top: rem(-600)
  }
}

@-webkit-keyframes up {
  0% {
    top: rem(54)
  }

  100% {
    top: rem(-600)
  }
}

